<template>
  <div class="pa-2">
    <v-card width="460px">
      <v-card-title>message</v-card-title>
      <v-card-actions>
        <v-btn @click="infoMessage">info</v-btn>
        <v-btn @click="successMessage">success</v-btn>
        <v-btn @click="warnMessage">warn</v-btn>
        <v-btn @click="errorMessage">error</v-btn>
        <v-btn @click="exception">exception</v-btn>
      </v-card-actions>
    </v-card>
    <v-card class="my-2" width="400px">
      <v-card-title>confirm</v-card-title>
      <v-card-actions>
        <v-btn @click="confirm">confirm</v-btn>
        <v-btn @click="confirmD">confirm（装饰器）</v-btn>
      </v-card-actions>
    </v-card>

    <v-card class="my-2" width="400px">
      <v-card-title>loading</v-card-title>
      <v-card-actions>
        <v-btn @click="loading">loading</v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import {
  Confirm,
  OnException,
  OnFinishedError,
  OnFinishedInfo,
  OnFinishedSuccess,
  OnFinishedWarning,
  OnStartError,
  OnStartInfo,
  OnStartSuccess,
  OnStartWarning,
  WithLoading,
} from "../../packages";

@Component
export default class Test extends Vue {
  @OnStartInfo("执行前info")
  infoMessage() {}

  @OnStartSuccess("执行前success")
  @OnFinishedSuccess("执行后success")
  successMessage() {
    this.$message.success("我是一条success消息");
  }

  @OnStartWarning("执行前warn")
  @OnFinishedWarning("执行后warning")
  warnMessage() {
    this.$message.warning("我是一条warn消息");
  }

  @OnStartError("执行前 error")
  @OnFinishedError("执行后error")
  errorMessage() {
    this.$message.error("我是一条error消息");
  }

  @OnException("执行报错了！！！")
  @OnStartInfo("开始执行")
  @OnFinishedSuccess("执行完成")
  exception() {
    throw new Error("报错了");
  }

  async confirm() {
    try {
      await this.$confirm.Confirm("是否选择");
      this.$message.success("已确认操作");
    } catch {
      this.$message.warning("已取消操作");
    }
  }

  @Confirm("是否选择（装饰器）")
  async confirmD() {
    this.$message.success("点击确认");
  }

  @WithLoading("加载中")
  async loading() {
    await new Promise<void>((resolve) => {
      window.setTimeout(() => {
        console.log("1");
        resolve();
      }, 3000);
    });
    //const load = this.$loader.loading('加载中');
  }
}
</script>
